import React,{Component} from 'react';
import {connect} from 'react-redux';
import {setSelectedKey} from "../../actions";
import ContainerItem from '../../components/ContainerItem/ContainerItem';
import FormItems from '../../components/FormItems/FormItems';

class RoleAdd extends Component{
    constructor(props){
        super(props);
        this.state={}
    }

    render() {
        const formItemLayout = {
            labelCol: {
                xs:{span: 24},
                sm:{span: 24},
                md:{span:5},
                lg:{span:4}
            },
            wrapperCol: {
                xs:{span: 24},
                sm:{span: 24},
                md:{span:19},
                lg:{span:10}
            },
        };
        const formSetting={
            layout:"vertical",
            formItemLayout:formItemLayout,
            items:[
                {
                    type:"Input",
                    label:"角色名称：",
                    key:"rolename",
                    placeholder:"请输入角色名称",
                    required:true,
                    message:"请输入角色名称",
                },
                {
                    type:"Select",
                    label:"上级角色：",
                    key:"role",
                    mode:"",
                    placeholder:"请选择上级角色",
                    required:true,
                    message:"请选择上级角色",
                    attention:"",
                    options:[
                        {
                            label:'管理员',
                            value:'1'
                        },
                        {
                            label:'会员',
                            value:'2'
                        }
                    ]
                },
                {
                    type:"Number",
                    label:"排序：",
                    key:"sort",
                    placeholder:"请输入序号",
                    required:true,
                    message:"请输入序号",
                },
                {
                    type:"Button",
                    icon:"",
                    label:"提交",
                    handleOnClick:this.handleOnClick
                }
            ]
        };
        return(
            <div>
                <ContainerItem title={'添加角色'}>
                    <div style={{marginTop:"20px"}}>
                        <FormItems formSetting={formSetting} />
                    </div>
                </ContainerItem>
            </div>
        )
    }

    componentDidMount() {
        this.props.setSelectedKey('/index/roleList')
    }

    /**
     * 处理添加管理员事件
     */
    handleOnClick=(param)=>{
        param.form.validateFields((error,values)=>{
            if(!error){
                console.log(values)
            }
        })
    }
}

const mapStateToProps=state=>{
    return{
        selectedKey:state.setSelectedKey
    }
};
const mapDispatchToProps=dispatch=>{
    return{
        setSelectedKey:selectedKey=>{
            dispatch(setSelectedKey(selectedKey));
        }
    }
};
export default connect(mapStateToProps,mapDispatchToProps)(RoleAdd);
